<template>

  <div class="digitalScroll-title">
    <h3>Brand Advantage</h3>
    <p>A man of strength to rely on</p>
  </div>

  <div class="digialScroll-picture">
    <ul>
      <li><el-icon><Location /></el-icon></li>
      <li><el-icon><GoldMedal /></el-icon></li>
      <li><el-icon><PhoneFilled /></el-icon></li>
      <li><el-icon><Pouring /></el-icon></li>
    </ul>
  </div>

  <div class="digitalScroll-item">
    <ul v-if="aountData.length > 0">
      <li v-for="(itme, indx) in (AdvantageData as any)" :key="indx">
        <!-- <span><CountTo :startVal="start" :endVal="itme.aomunt" :duration="7000" :useEasing="true" class="CountTo_num"></CountTo>{{ itme.type }}</span> -->
        <h3 style="margin-left: 30px;">{{ itme.title }}</h3>
        <div class="digitalScroll-item-context">
          <p>{{ itme.context }}</p>
        </div>
      </li>
    </ul>
  </div>


</template>


<script lang="ts">
import type { Advantage } from '#build/components';
import { getAount } from '@/api/api';



  export default {
    name: "DigitalScroll",
    setup(){
      const data = reactive({
        num: ref(20),
        start : ref(0),
        end : ref(1000),
        aountData: [{}],
        AdvantageData: ref(null),
      })


      getAount('').then((res: any) => {
        data.AdvantageData = res._rawValue.title
        console.log(res);
        
      }).catch((err: any) => {
        console.log(err, '请求失败')
      })





      return{
        ...toRefs(data),
        
      }
    },

    components: {

    }
  }

</script>


<style>
 .digitalScroll-title {
    position: relative;
    margin-top: 100px !important;
    margin-bottom: 70px;
    line-height: 40px;
    text-align: center;
  }

  .digitalScroll-title h3 {
    font-size: 30px;
    font-weight: bold;
    margin-bottom: 10px;
  }

  .digitalScroll-title p {
    font-size: 17px;
  }

  .digitalScroll-item ul,
  .digialScroll-picture ul{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    
  }

  .digialScroll-picture ul li i:nth-child(1){
    margin-right: 60px;
  }

  .digialScroll-picture ul li i:hover {
    animation: bounce 1s ease;
  }

  /* icon动画效果 */
  @keyframes bounce {
    0% {
      transform: rotate(40deg);
    }
    20% {
      transform: rotate(-40deg);
    }
    40% {
      transform: rotate(30deg);
    }

    60% {
      transform: rotate(-20deg);
    }

    80% {
      transform: rotate(10deg);
    }


    100% {
      transform: rotate(0deg);
    }

  }

  .CountTo_num {
    font-size: 30px;
    color: rgb(179, 64, 64);
    font-weight:bolder;
    margin-right: 10px;
  }

  .digitalScroll-item ul li,
  .digialScroll-picture ul li {
    list-style: none;
  }

  .digialScroll-picture ul li {
    font-size: 80px;
  }

  .digitalScroll-item p {
    width: 96%;
    text-align: left;

  }


  .digitalScroll-item-context {
    width: auto;
    margin-left: 70px;
    margin-top: 40px;
  }


</style>